<template>
    <el-card class="control-area-card" shadow="hover">
        <template #header>
            <div class="card-header">
                <span>{{ website.aside.deviceControlTitle }}</span>
            </div>
        </template>
        <div class="control-btn-box">
            <template v-for="(value, key, index) in deviceControl.btnDirection" :key="index">
                <HCameraControlBtn v-if="key !== 'circle'" :direction="key.toString()" :icon="icon(key.toString())"
                    :route="dir[key]" @mousedown="() => mouseDownHandler(key.toString())" @mouseup="() => mouseUpHandler()"
                    v-style="{ 'mouseover::background-color': deviceControl.hoverBgColor }">
                </HCameraControlBtn>
                <HCameraControlBtn v-else :direction="key.toString()" :icon="icon(key.toString())" :route="dir[key]"
                    @click="() => onClick(key.toString())"
                    v-style="{ 'mouseover::background-color': deviceControl.hoverBgColor }">
                </HCameraControlBtn>
            </template>
        </div>
    </el-card>
</template>
<script lang="ts" setup>
import { computed, inject } from "vue"
import { useStore } from "vuex"
import HCameraControlBtn from "./HCameraControlBtn.vue"
import { IDeviceControlState } from "@/store/models/Home/Aside/DeviceControl/types"
import MultiWebSocket, { ConnectionInfo, IMultiWebSocket } from '@/utils/websocket';
import { camera, onvifCamera } from "@/mock/Camera";
import { IStreamControlState } from "@/store/models/Home/Aside/StreamControl/types";
import { formattObjectToString } from "@/utils/core";
import { IWebsite } from "@/store/types";
const store = useStore();

const dir = {
    leftTop: -45,
    top: 0,
    rightTop: 45,
    left: -90,
    circle: 0,
    right: 90,
    leftBottom: -135,
    bottom: 180,
    rightBottom: 135
}
let intervalId = null;
const website = inject('website') as IWebsite
const ws = new WebSocket('ws://localhost:3000/controlCamera');
const data = {
    type: 'conn',
    config: onvifCamera
}
ws.onopen = function (event) {
    ws.send(JSON.stringify(data));
};
ws.onmessage = function (event) {
    console.log('onmessage', JSON.parse(event.data));
    const data = JSON.parse(event.data);
    Array.from(streamState.value, ([key, value]) => ({ key, value }))
        .map(item => {
            if (item.value.status) {
                item.value.pos = data.pos
            }
        })
};
const deviceControl = computed(() => store.state.home.frontAside.deviceControl as IDeviceControlState);
const streamState = computed(() => store.state.home.frontAside.streamControl.streamState as IStreamControlState['streamState'])
const icon = (key: string) => key === 'circle' ? deviceControl.value.stopIcon : deviceControl.value.icon
const onClick = (direction: string) => store.commit('home/frontAside/deviceControl/_moveCamera', { ws, direction })
const mouseDownHandler = (direction: string) => {
    intervalId = setInterval(() => store.commit('home/frontAside/deviceControl/_moveCamera', { ws, direction }), 100)
}
const mouseUpHandler = () => clearInterval(intervalId)

</script>
<style scoped lang="less"></style>
